<!-- 好友拼单 -->
<template>
  <view class="spell-order">
    <view class="header-share">
      <view class="title">{{ $t("alipay.shareFri") }}</view>
      <view class="share-btn">
        <button open-type="share"></button>
        <text>{{ $t("alipay.invite") }}</text>
      </view>
    </view>

    <view class="order-section">
      <view class="md-title">
        <view class="md-name">{{ md_name }}</view>
        <view class="order-spell" v-if="!dataList.length">{{
          $t("alipay.noFri")
        }}</view>
      </view>
      <!-- 点餐人及已点商品列表 -->
      <view class="user-order-list" v-if="dataList.length">
        <view
          class="user-order-item"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <view class="item-top-info">
            <view class="user-info">
              <image :src="item.avatar" mode="aspectFill" />
              <text
                >{{ item.name
                }}{{
                  item.user_id == userId ? "（" + $t("alipay.me") + "）" : ""
                }}</text
              >
            </view>
            <view class="user-operate">
              <text
                v-if="item.user_id == user_id"
                @click="gotoEdit(item.user_id)"
                >{{ $t("alipay.editGodd") }}</text
              >
              <text
                v-if="item.user_id == user_id"
                @click="deleteGoods(item.user_id)"
                >{{ $t("cart.delete") }}</text
              >
            </view>
          </view>
          <view class="user-goods-list">
            <view
              class="user-goods-item"
              v-for="(goods, i) in item.goods_list"
              :key="i"
            >
              <image class="goods-img" :src="goods.goods_pic" mode="aspectFill" />
              <view class="godos-info">
                <view class="info-detail">
                  <view class="goods-name">{{ goods.goods_name }}</view>
                  <view class="sku-info">
                    <text
                      style="margin-right: 6px"
                      v-for="(attr, attrIndex) in goods.attr_list"
                      :key="attrIndex"
                    >
                      {{ attr.attr_group_name }}:{{ attr.attr_name }}
                    </text>
                  </view>
                  <view
                    class="sku-info"
                    v-if="goods.food_ext_goods && goods.food_ext_goods.length"
                  >
                    小料：
                    <text
                      style="margin-right: 6px"
                      v-for="(attr, attrIndex) in goods.food_ext_goods"
                      :key="attrIndex"
                    >
                      {{ attr.name }}x{{ attr.num }}
                    </text>
                  </view>
                  <view class="price">¥{{ goods.price }}</view>
                </view>
                <view class="info-num">x{{ goods.num }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="no-order-view">
        <view class="user-info">
          <image :src="userInfo.avatar_url" mode="" />
          <text>{{ $t("alipay.first") }}</text>
        </view>
        <view class="to-add-text" @click="gotoEdit(user_id)">
          <text>{{ $t("alipay.noGood") }}</text>
          <u-icon size="22" color="#F0250E" name="arrow-right"></u-icon>
        </view>
      </view>
      <!-- 关闭拼单 -->
      <view
        class="close-spell"
        v-if="user_id == shareId"
        @click="closeSpellOrder"
      >
        {{ $t("alipay.closeOrder") }}
      </view>
    </view>
    <view class="foot-section">
      <view class="foot-content">
        <view class="total-price">
          <text>{{ $t("cart.total") }}</text>
          <text>¥</text>
          <text>{{ totalPrice }}</text>
        </view>
        <view
          class="submit-btn"
          @click="handleSubmit"
          :class="canSubmit ? 'can-submit' : ''"
          >{{
            canSubmit ? (user_id == shareId ? "去结算" : "已选好") : "去结算"
          }}</view
        >
      </view>
      <view class="safe"></view>
    </view>

    <view class="modal-section" v-if="showConfirmModal">
      <view class="modal-bg"></view>
      <view class="modal-content">
        <view class="modal-title">{{ $t("alipay.buy") }}</view>
        <view class="modal-msg">{{ $t("alipay.noEdit") }}</view>
        <view class="modal-btns">
          <view class="cancel-btn" @click="showConfirmModal = false">{{
            $t("person.cancle")
          }}</view>
          <view class="confirm-btn" @click="confirmSubmit">{{
            $t("alipay.conSub")
          }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { orderMealMixin } from "../../mixins/index";

export default {
  components: {},
  props: {
    shareId: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: [],
    },
    totalPrice: {
      type: String,
      default: "0",
    },
    md_name: {
      type: String,
      default: "",
    },
    flag_id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isInitiator: false, // 是否是发起人
      showConfirmModal: false,
    };
  },
  mixins: [orderMealMixin], //混入文件
  filters: {},
  computed: {
    canSubmit() {
      if (this.dataList.length && this.user_id == this.shareId) {
        return true;
      }
      if (this.user_id != this.shareId) {
        if (!this.dataList.length) return false;
        let [userData] = this.dataList.filter((d) => {
          return d.user_id == this.user_id;
        });
        if (userData.goods_list.length) {
          return true;
        } else {
          return false;
        }
      }
      return false;
    },
  },
  mounted() {},
  methods: {
    // 继续提交
    confirmSubmit() {
      this.$emit("confirmSubmit");
    },
    gotoEdit(id) {
      if (id == this.user_id) {
        let pages = getCurrentPages();
        if (pages.length == 2) {
          uni.navigateBack();
          return;
        } else {
          this.$utils.toUrl(
            `/alipay-order/orderMeal/orderMeal?flag_id=${this.storeFlagId}&shareId=${this.startManId}`,
            "redirectTo"
          );
        }
      }
      return;
    },
    deleteGoods(id) {
      this.emptyUserCart(id, () => {
        this.pollingCartData();
      });
    },
    // 点击提交按钮
    handleSubmit() {
      if (!this.canSubmit) return;
      if (this.shareId != this.user_id) {
        // 别人分享的拼单
        let params = { flag_id: this.storeFlagId };
        let mdData = uni.getStorageSync("storeMdData");
        if (!mdData) {
          params["md_id"] = -1;
        }
        this.$allrequest.alipay.userCompleteSpell(params).then((res) => {
          if (!res.code) {
            uni.showToast({
              title: this.$t("mdAdmin.submitSuc"),
              duration: 2000,
              icon: "none",
            });
            this.$emit("userHandleComfirm");
          }
        });
        return;
      }
      this.showConfirmModal = true;
    },
    // 点击关闭拼单
    closeSpellOrder() {
      uni.showModal({
        title: this.$t("order.prompt"),
        content: this.$t("alipay.confirmClose"),
        success: (res) => {
          if (res.confirm) {
            this.$emit("stopSpell");
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.spell-order {
  width: 100%;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
  .header-share {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rpx 0 30rpx 0;
    .title {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f0250e;
    }
    .share-btn {
      width: 200rpx;
      height: 70rpx;
      background: #f0250e;
      border-radius: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 30rpx;
      position: relative;
      button {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
  }
  .order-section {
    width: 100%;
    background: #ffffff;
    padding-top: 30rpx;
    margin-bottom: 24rpx;
    .md-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      .md-name {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .order-spell {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
    .user-order-list {
      width: 100%;
      padding-top: 30rpx;

      .user-order-item {
        width: 100%;
        padding: 0 24rpx 30rpx 24rpx;
        .item-top-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .user-info {
            display: flex;
            align-items: center;
            image {
              width: 34rpx;
              height: 34rpx;
              background: #ffdfdb;
              border-radius: 17rpx;
              margin-right: 6rpx;
            }
            text {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
            }
          }
          .user-operate {
            display: flex;
            align-items: center;
            text {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
              margin-left: 30rpx;
            }
          }
        }
        .user-goods-list {
          width: 100%;
          .user-goods-item {
            width: 100%;
            display: flex;
            align-items: flex-start;
            padding: 24rpx 0;
            border-bottom: 1px solid #f8f8f8;
            .goods-img {
              width: 166rpx;
              height: 166rpx;
              background: #f2f2f2;
              border-radius: 10rpx;
              flex-shrink: 0;
            }
            .godos-info {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-left: 20rpx;
              .info-detail {
                flex: 1;
                .goods-name {
                  font-size: 28rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #262626;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  max-width: 464rpx;
                }
                .sku-info {
                  font-size: 24rpx;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #8c8c8c;
                  margin-top: 10rpx;
                  max-width: 163px;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
                  overflow: hidden;
                }
                .price {
                  font-size: 32rpx;
                  font-family: PingFang SC;
                  font-weight: 600;
                  color: #262626;
                  margin-top: 14rpx;
                }
              }
              .info-num {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
              }
            }
          }
          .user-goods-item:last-child {
            padding-bottom: 0;
            border-bottom: 0 none;
          }
        }
      }
    }
    .no-order-view {
      width: 100%;
      padding: 30rpx 24rpx;
      .user-info {
        display: flex;
        align-items: center;
        image {
          width: 34rpx;
          height: 34rpx;
          background: #ffdfdb;
          border-radius: 17rpx;
          margin-right: 6rpx;
        }
        text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
      }
      .to-add-text {
        display: flex;
        align-items: center;
        margin-top: 24rpx;
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f0250e;
        }
      }
    }
    .close-spell {
      width: 93.6%;
      height: 80rpx;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px solid #f1f1f1;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
    }
  }
  .foot-section {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
    background-color: #ffffff;
    .foot-content {
      width: 100%;
      height: 112rpx;
      background: #ffffff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 24rpx;
      .submit-btn {
        width: 224rpx;
        height: 80rpx;
        background: #8c8c8c;
        border-radius: 112rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #fffefe;
        margin-left: 14rpx;
      }
      .can-submit {
        background: #f0250e;
      }
      .total-price {
        display: flex;
        align-items: baseline;
        color: #f0250e;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #f0250e;
        text:nth-child(3) {
          font-size: 40rpx;
        }
      }
    }
    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  .modal-section {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 111;
    .modal-bg {
      width: 100%;
      height: 100%;
      background-color: #000000;
      opacity: 0.5;
    }
    .modal-content {
      width: 80vw;
      background: #ffffff;
      border-radius: 24rpx;
      position: absolute;
      left: 10vw;
      top: 30vh;
      z-index: 111;
      padding-top: 24rpx;
      .modal-title {
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .modal-msg {
        width: 66.67vw;
        margin: 46rpx auto 0;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #262626;
      }
      .modal-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 74rpx;
        padding-bottom: 50rpx;
        .cancel-btn {
          width: 230rpx;
          height: 76rpx;
          background: #ffffff;
          border: 1px solid #999999;
          border-radius: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .confirm-btn {
          width: 230rpx;
          height: 76rpx;
          background: #f0250e;
          border-radius: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-left: 40rpx;
        }
      }
    }
  }
}
</style>
